<template>
  <div class="page-container">
    <!--工具栏-->
    <div
      class="toolbar"
      style="float: left; padding-top: 10px; padding-left: 15px"
    >
      <el-form :inline="true" :model="filters" :size="size">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            perms="sys:loginlog:view"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <div>
      <!--表格栏-->
      <el-table
        :data="pageResult.content"
        :highlight-current-row="highlightCurrentRow"
        @selection-change="selectionChange"
        @current-change="handleCurrentChange"
        v-loading="loading"
        :element-loading-text="$t('action.loading')"
        :border="border"
        :stripe="stripe"
        :show-overflow-tooltip="showOverflowTooltip"
        :max-height="maxHeight"
        :size="size"
        :align="align"
        style="width: 100%"
      >
        <el-table-column
          v-for="column in columns"
          header-align="center"
          align="center"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :type="column.type"
          :sortable="column.sortable == null ? true : column.sortable"
        >
          <template slot-scope="scope">
            <div v-if="column.isDateFormat">
              {{ scope.row | dateFormat1(column) }}
            </div>
            <div v-else-if="column.isLoginStatus">
              {{ scope.row | statusFormat(column) }}
            </div>
            <div v-else v-text="scope.row[column.prop]"></div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <div class="toolbar" style="padding: 10px">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="pageResult.totalSize"
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { dateFormat } from "@/utils/datetime";
export default {
  components: {
    KtButton,
  },
  props: {
    permsEdit: String, // 编辑权限标识
    permsDelete: String, // 删除权限标识
    size: {
      // 尺寸样式
      type: String,
      default: "mini",
    },
    align: {
      // 文本对齐方式
      type: String,
      default: "left",
    },
    maxHeight: {
      // 表格最大高度
      type: Number,
      default: 440,
    },
    showOperation: {
      // 是否显示操作组件
      type: Boolean,
      default: true,
    },
    border: {
      // 是否显示边框
      type: Boolean,
      default: false,
    },
    stripe: {
      // 是否显示斑马线
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      // // 是否高亮当前行
      type: Boolean,
      default: true,
    },
    showOverflowTooltip: {
      // 是否单行显示
      type: Boolean,
      default: true,
    },
    showBatchDelete: {
      // 是否显示操作组件
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      filters: {
        name: "",
      },
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      columns: [],
      filterColumns: [],
      loading: false, // 加载标识
      selections: [], // 列表选中列
    };
  },
  methods: {
    // 获取分页数据
    findPage: function (pagNum) {
      this.loading = true;
      if (pagNum !== null) {
        this.pageRequest.pageNum = pagNum;
      }
      this.pageRequest.params = [
        { name: "userName", value: this.filters.name },
      ];
      this.$api.loginlog
        .findPage(this.pageRequest)
        .then((res) => {
          if (res.msg != null) {
            this.$message({
              message: res.msg,
              type: "error",
            });
          } else {
            this.pageResult = res.data;
            this.loading = false;
          }
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        });
    },
    // 选择切换
    selectionChange: function (selections) {
      this.selections = selections;
      this.$emit("selectionChange", { selections: selections });
    },
    // 选择切换
    handleCurrentChange: function (val) {
      this.$emit("handleCurrentChange", { val: val });
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findPage(pageNum);
    },
    // 处理表格列过滤显示
    initColumns: function () {
      this.columns = [
        //{ prop: "id", label: "ID", minWidth: 60 },
        { prop: "userName", label: "用户名", minWidth: 100 },
        {
          prop: "status",
          label: "状态",
          minWidth: 60,
          isLoginStatus: true,
        },
        { prop: "ip", label: "登录IP地址", minWidth: 120 },
        { prop: "createBy", label: "创建人", minWidth: 100 },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120,
          isDateFormat: true,
        },
      ];
      this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },
  },
  filters: {
    //使用过滤器进行状态格式化
    // 状态格式化
    statusFormat(row, column) {
      let status = row[column.prop];
      if (status == "online") {
        return "在线";
      } else if (status == "login") {
        return "登录";
      } else if (status == "logout") {
        return "退出";
      } else {
        return "其它";
      }

      //console.log(row + "**********" + column.prop);
    },
    // 时间格式化
    dateFormat1(row, column) {
      //console.log("********"+column.formatter);
      let dateTime = row[column.prop];
      return dateFormat(dateTime); //return formatWithSeperator(row[column.property],"*","-");
    },
  },
  mounted() {
    this.initColumns();
    this.findPage(1);
  },
};
</script>

<style scoped>
</style>